<template>
  <el-form ref="form" label-position="right" :model="currentRow" :rules="rules" label-suffix="："
           label-width="90px">
    <div class="huapo-input1">
      <el-row>
        <el-col :span="12">
          <el-form-item label="滑坡类型" prop="landslideType">
            <el-radio-group v-model="currentRow.damage.landslide.landslideType">
              <el-radio-button v-for="item in EnumLandSlideTypeList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="灾害部位" prop="slopePositionType">
            <el-radio-group v-model="currentRow.damage.landslide.slopePositionType">
              <el-radio-button v-for="item in EnumSlopePositionTypeList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="坡度" prop="angle">
            <el-input v-model="currentRow.damage.landslide.angle" placeholder="输入山坡的度数"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="滑坡体结构" prop="slopeSlideStructure">
            <el-radio-group v-model="currentRow.damage.landslide.slopeSlideStructure">
              <el-radio-button v-for="item in EnumSlopeSlideStructureList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="前缘河流冲刷" prop="riverWash">
            <el-radio-group v-model="currentRow.damage.landslide.riverWash">
              <el-radio-button v-for="item in EnumRiverWashList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="坡高" prop="height">
            <el-input v-model="currentRow.damage.landslide.height" placeholder="输入山坡的高度"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="geology-children">
      规模
    </div>
    <div class="huapo-input2">
      <el-row>
        <el-col :span="6">
          <el-form-item label="长度">
            <!--            //v-model 不支持多级嵌套对象，使用临时对象-->
            <el-input v-model="currentRow.damage.landslide.length" type="number" placeholder="输入堆积体长度(m)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宽度" prop="width">
            <el-input v-model="currentRow.damage.landslide.item.width" type="number" placeholder="输入滑坡宽度(m)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="高度" prop="height">
            <el-input v-model="currentRow.damage.landslide.item.height" type="number" placeholder="输入滑坡高度(m)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="体积" prop="volume">
            <el-input v-model="currentRow.damage.landslide.item.volume" type="number" placeholder="输入滑坡体积(m3)"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>


  </el-form>
</template>
<script>
import ItemMixins from "./item.mixins";
import Enums from '@/utils/enums'

export default {
  props: ['value'],
  mixins: [ItemMixins,Enums],
  data() {
    return {
      // 单位信息表单 校验规则
      rules: {
        roadId: {required: true, message: '请选择路线'},
      },
      EnumLandSlideTypeList: [],
      EnumSlopePositionTypeList: [],
      EnumSlopeSlideStructureList: [],
      EnumRiverWashList: [],
    }
  },
  computed: {
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {

    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumSlopePositionType', 'EnumSlopeSlideStructure', 'EnumRiverWash','EnumLandSlideType',],
      ['EnumSlopePositionTypeList', 'EnumSlopeSlideStructureList', 'EnumRiverWashList','EnumLandSlideTypeList']);
  },
  created() {
  },
}
</script>

<style lang="less">

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .huapo-input2 {
    .el-form-item__label {
      width: 88px !important;
    }
  }

  .huapo-input1 {
    padding: 20px;

    .el-form-item__label {
      width: 98px !important;
    }

    .el-input {
      width: 70% !important;
    }
  }

  .geology-children {
    font-size: 18px;
    border-bottom: 1px solid;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
</style>
